import { _decorator, Button, Component, EventTouch, Label, Node, NodeEventType, Sprite, tween, UIOpacity, Vec2, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SkillBottom')
export class SkillBottom extends Component {
    @property(Node)
    ndText: Node;
    @property(Node)
    ndIcon: Node;
    @property(Node)
    ndPanel: Node;
    private _isAvaliable: boolean = true;

    public cdTimer: number;
    private _coldDownTime: number = 3;

    private _v2: Vec2 = new Vec2();
    private _v3: Vec3 = new Vec3();

    private _listener: Function;
    private _target: any;
    private _eventArg: [number, number] = [0, 0];
    private _radian: number;

    static readonly Event = {
        START: 0,
        MOVE: 1,
        END: 2,
        CANCEL: 3
    }

    private _isColding: boolean = false;
    private _currColdTIme: number = 0;
    public get coldDownTime(): number {
        return this._coldDownTime;
    }

    public set coldDownTime(value: number) {
        value = value >= 0 ? value : 0;
        this._coldDownTime = value;
    }


    public get isAvaliable(): boolean {
        return this._isAvaliable;
    }

    public set isAvaliable(value: boolean) {
        this.isAvaliable = value;
        this.node.getComponentsInChildren(Sprite).forEach(sprite => {
            sprite.grayscale = !value;
        })
    }


    protected onEnable(): void {
        this.ndPanel.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.ndPanel.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.ndPanel.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.ndPanel.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);

        this.ndText.active = false;
        this.hidePanel();
    }

    protected onDisable(): void {
        this.ndPanel.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.ndPanel.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.ndPanel.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.ndPanel.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    }

    update(deltaTime: number) {
        if (this._isColding) {
            this._currColdTIme -= deltaTime;
            this.ndText.getComponent(Label).string = `${this._currColdTIme.toFixed(1)}`
            if (this._currColdTIme <= 0) {
                this._isColding = false;
                this._isAvaliable = true;
                this.ndText.active = false;
            }
        }
    }

    onTouchStart(event: EventTouch) {
        if (!this._isAvaliable) return;
        this._eventArg[0] = SkillBottom.Event.START;
        this._eventArg[1] = this._radian;
        this._listener && this._listener.apply(this._target, this._eventArg);

    }

    onTouchMove(event: EventTouch) {
        event.getUILocation(this._v2);
        this._v3.set(this._v2.x, this._v2.y);

        const startWorldPosition = this.node.worldPosition;
        const currWorldPositoin = this._v3;
        const radian = Math.atan2(currWorldPositoin.y - startWorldPosition.y, currWorldPositoin.x - startWorldPosition.x);

        const distance = Vec2.distance(startWorldPosition, currWorldPositoin)
        if (distance > 50) {
            this.showPanel();
            this._eventArg[0] = SkillBottom.Event.MOVE;
            this._eventArg[1] = radian;
            this._radian = radian;
            this._listener && this._listener.apply(this._target, this._eventArg);
        } else {
            this.hidePanel();
        }


    }

    onTouchEvent(listener: Function, target?: any) {
        this._listener = listener;
        this._target = target;
    }

    onTouchEnd() {
        this.hidePanel();
        if (!this._isAvaliable) return;
        this._isColding = true;
        this._currColdTIme = this.coldDownTime;

        this._isAvaliable = false;
        this.ndText.active = true;
        this.ndText.getComponent(Label).string = `${this._currColdTIme.toFixed(1)}`

        this._eventArg[0] = SkillBottom.Event.END;
        this._eventArg[1] = this._radian;
        this._listener && this._listener.apply(this._target, this._eventArg);
    }

    onTouchCancel() {
        this.hidePanel();
        this._eventArg[0] = SkillBottom.Event.CANCEL;
        this._eventArg[1] = this._radian;
        this._listener && this._listener.apply(this._target, this._eventArg);
    }


    private showPanel() {
        const uiOpacity = this.ndPanel.getComponent(UIOpacity);
        uiOpacity.opacity = 0;
        tween(uiOpacity)
            .to(0.2, { opacity: 255 }, { easing: 'expoOut' })
            .start
    }

    private hidePanel() {
        this.ndPanel.getComponent(UIOpacity).opacity = 0;
    }




}


